<template>
  <div class="app-container">
    <div class="container-info">
      <div class="filter-container">
        <el-form :inline="true" :model="searchObject">
          <el-form-item :label="$t('processList.processName')">
            <el-input v-model="searchObject.processName" :placeholder="$t('processList.processName')" clearable />
          </el-form-item>
          <el-form-item :label="$t('processList.processKey')">
            <el-input v-model="searchObject.processKey" :placeholder="$t('processList.processKey')" clearable />
          </el-form-item>
          <el-form-item :label="$t('processList.status')">
            <el-select v-model="searchObject.status" :placeholder="$t('processList.status')" clearable>
              <el-option value="-1">{{ $t('processList.placeSelect') }}</el-option>
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="$t('processList.status'+item.value)"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-search" @click="queryList">{{ $t('processList.query') }}</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addProcess">{{ $t('processList.addProcess') }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-loading="listLoading" class="content-container">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="$t('loading.text')"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" :label="$t('processList.id')" width="95">
            <template slot-scope="scope">
              {{ (searchObject.pageIndex - 1 ) * searchObject.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('processList.processName')">
            <template slot-scope="scope">
              {{ scope.row.processName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('processList.processKey')">
            <template slot-scope="scope">
              {{ scope.row.processKey }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('processList.companyId')" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ companyMap[scope.row.companyId] }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('processList.tenantId')" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.tenantId }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('processList.status')" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.processStatus | statusFilter">
                {{ statusMap[scope.row.processStatus] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('processList.remarks')"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.remarks }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('processList.operatorName')" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.operatorName + '-' + scope.row.operatorId }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('processList.updateTime')" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime || scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('processList.action')" width="550" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-row :gutter="2">
                <el-col :span="4">
                  <el-button type="primary" size="mini" icon="el-icon-edit" plain @click="editForm(scope.row)">{{ $t('processList.update') }}</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button type="success" size="mini" icon="el-icon-view" plain @click="showDiagram(scope.row)">{{ $t('processList.showDiagram') }}</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button type="danger" size="mini" icon="el-icon-delete" plain @click="deleteProcess(scope.row)">{{ $t('processList.deleted') }}</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button type="info" size="mini" plain icon="el-icon-camera" @click="showProcessVersionDialog(scope.row)">{{ $t('processList.versionManager') }}</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button type="success" size="mini" icon="el-icon-s-promotion" plain @click="publish(scope.row)">{{ $t('processList.publish') }}</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button type="warning" size="mini" icon="el-icon-setting" plain @click="showEditDiagramDialog(scope.row)">{{ $t('processList.editDiagram') }}</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="page-footer">
        <pagination v-show="total>0" :total="total" :page.sync="searchObject.pageIndex" :limit.sync="searchObject.pageSize" style="float:right;" @pagination="queryList" />
      </div>

      <div>
        <!-- 预览 -->
        <el-dialog
          v-if="showDiagramDialog.visible"

          :title="showDiagramDialog.title"
          :visible.sync="showDiagramDialog.visible"
          :width="showDiagramDialog.width"
          center
          :before-close="handleClose"
        >
          <ShowDiagram
            :new-process-diagram-xml.sync="diagramXml"
            @close="closeShowDiagram"
          />
        </el-dialog>

        <el-dialog
          v-if="editDiagramDialog.visible"

          :title="editDiagramDialog.title"
          :visible.sync="editDiagramDialog.visible"
          :width="editDiagramDialog.width"
          :fullscreen="editDiagramDialog.fullscreen"
          :close-on-press-escape="editDiagramDialog.closeOnPressEscape"
          center
          :before-close="handleClose"
          @close="closeDiagramDialog"
        >
          <diagram-manager
            v-if="editDiagramDialog.visible"
            ref="diagramManager"
            :process-info.sync="processInfo"
            :new-process-diagram-xml.sync="diagramXml"
            :process-detail-id.sync="editDiagramDialog.data"
            @queryList="queryList"
            @close="closeDiagramDialog"
          />

        </el-dialog>

        <el-dialog
          v-if="processVersionDialog.visible"

          :title="processVersionDialog.title"
          :visible.sync="processVersionDialog.visible"
          :width="processVersionDialog.width"
          center
          :before-close="handleClose"
        >
          <processVersion
            ref="processVersion"
            :process-info.sync="processVersionDialog.data"
            @queryList="queryList"
            @close="closeProcessVersionDialog"
          />
        </el-dialog>

        <el-dialog
          v-if="addProcessDialog.visible"
          :title="addProcessDialog.title"
          :visible.sync="addProcessDialog.visible"
          :width="addProcessDialog.width"
          center
          :before-close="handleClose"
        >
          <insert-form ref="addProcess" @close="closeAddProcessDialog" @queryList="queryList" />
        </el-dialog>

        <el-drawer
          v-if="showUpdateDialog.visible"

          :title="showUpdateDialog.title"
          :visible.sync="showUpdateDialog.visible"
          :direction="showUpdateDialog.direction"
          append-to-body
          custom-class="drawer"
          :before-close="handleClose"
        >
          <div class="custom_drawer__content">
            <updateForm ref="updateForm" :process-info.sync="showUpdateDialog.data" @queryList="queryList" @closeUpdateForm="closeUpdateForm" />
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { generateTitle } from '@/utils/i18n'
import { getList, deleteProcess } from '@/api/process'
import { publish, getProcessDetailById } from '@/api/processDetail'
import { getCompanyDict } from '@/api/company'
import Pagination from '@/components/Pagination'
import ShowDiagram from '@/components/ShowDiagram'
import diagramManager from '@/components/DiagramManager'
import updateForm from './update.vue'
import insertForm from './addProcess.vue'
import processVersion from './processVersion.vue'

export default {
  components: { Pagination, ShowDiagram, updateForm, insertForm, diagramManager, processVersion },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'info',
        2: 'success'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      searchObject: {
        processKey: '',
        processName: '',
        status: null,
        tenantId: store.getters.tenantId,
        pageIndex: 1,
        pageSize: 10
      },
      paginationObj: {
        pageSize: 1,
        rowCount: 10
      },
      statusList: [
        {
          label: '未发布',
          value: 1
        },
        {
          label: '已发布',
          value: 2
        }
      ],
      companyList: [],
      companyMap: {},
      statusMap: { 1: '未发布', 2: '已发布' },
      list: [],
      listLoading: true,
      total: 0,
      previewOptions: {
        width: 850
      },
      showUpdateDialog: {
        // 弹窗组件传递数据
        title: '编辑流程',
        visible: false,
        width: '',
        name: '编辑流程', // 组件名,
        loading: false,
        data: '',
        fullscreen: false,
        closeOnPressEscape: false,
        direction: 'rtl'
      },
      diagramXml: '',
      showDiagramDialog: {
        title: '查看流程图',
        visible: false,
        width: '',
        data: '',
        name: '', // 组件名,
        loading: false
      },
      addProcessDialog: {
        title: '新增流程图',
        visible: false,
        width: '',
        data: '',
        name: '', // 组件名,
        loading: false
      },
      editDiagramDialog: {
        title: '流程设计器',
        visible: false,
        width: '',
        data: '',
        name: '流程设计器', // 组件名,
        loading: false,
        fullscreen: true,
        closeOnPressEscape: false
      },
      processVersionDialog: {
        title: '选择默认版本',
        visible: false,
        width: '70%',
        data: '',
        name: '选择默认版本', // 组件名,
        loading: false,
        fullscreen: true,
        closeOnPressEscape: false
      },
      processInfo: {}
    }
  },
  beforeCreate() {
    console.log('...............processList-----------------beforeCreate--------------')
  },
  created() {
    console.log('...............processList-----------------start--------------')
    this.searchObject = {
      processKey: '',
      formName: '',
      status: null,
      tenantId: store.getters.tenantId,
      pageIndex: 1,
      pageSize: 10
    }
    this.queryList()
    this.getCompanyDict()
  },
  mounted() {
  },
  methods: {
    closeProcessVersionDialog() {
      this.processVersionDialog.visible = false
    },
    showProcessVersionDialog(row) {
      this.$nextTick(() => {
        this.processVersionDialog.data = row
        this.processVersionDialog.visible = true
      })
    },
    publish(row) {
      getProcessDetailById(row.processDetailId).then(response => {
        this.$nextTick(() => {
          this.processXml = response.data.processXml || ''
          this.processInfo.processXml = this.processXml
          this.diagramXml = this.processXml
          const postData = {
            tenantId: store.getters.tenantId,
            processKey: row.processKey,
            processDetailId: row.processDetailId,
            processXml: this.processXml
          }
          publish(postData).then(response => {
            this.$message.success('发布成功！')
          })
        })
      })
    },
    closeDiagramDialog() {
      this.$nextTick(() => {
        this.editDiagramDialog.visible = false
      })
    },
    showEditDiagramDialog(row) {
      getProcessDetailById(row.processDetailId).then(response => {
        this.$nextTick(() => {
          this.processXml = response.data.processXml || ''
          this.processInfo.processXml = this.processXml
          this.processInfo = row
          this.processInfo.processXml = this.processXml
          this.diagramXml = this.processXml
          this.$nextTick(() => {
            this.editDiagramDialog.visible = true
            this.editDiagramDialog.data = row.processDetailId
          })
        })
      })
    },
    handleClose(done) {
      this.$confirm(this.$t('action.confirmClose'))
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    getCompanyDict() {
      const postData = {
        tenantId: store.getters.tenantId
      }
      getCompanyDict(postData).then(response => {
        this.companyList = response.data
        for (const key in response.data) {
          this.companyMap[response.data[key].value] = response.data[key].label
        }
      })
    },
    editForm(data) {
      this.showUpdateDialog.data = data
      this.showUpdateDialog.visible = true
      console.log('this.showUpdateDialog.data:' + JSON.stringify(this.showUpdateDialog.data))
    },
    closeUpdateForm() {
      this.$nextTick(() => {
        this.showUpdateDialog.visible = false
      })
    },
    closeAddProcessDialog() {
      this.$nextTick(() => {
        this.addProcessDialog.visible = false
      })
    },
    addProcess() {
      this.$nextTick(() => {
        this.addProcessDialog.visible = true
      })
    },
    generateTitle,
    queryList() {
      this.listLoading = true
      var param = this.searchObject
      getList(param).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.$nextTick(() => {
          this.listLoading = false
        })
      })
    },
    deleteProcess(process) {
      this.$confirm(this.$t('action.confirmDelete'))
        .then(_ => {
          const postData = {
            processKey: process.processKey,
            tenantId: process.tenantId
          }
          const _that = this
          _that.listLoading = true
          deleteProcess(postData).then(response => {
            _that.listLoading = false
            this.$message.success('删除成功')
            this.$nextTick(() => {
              this.listLoading = false
            })
            _that.queryList()
          }).catch(function(error) {
            _that.listLoading = false
            console.error(error)
          })
        })
        .catch(_ => {})
    },
    closeShowDiagram() {
      this.diagramXml = ''
      this.$nextTick(() => {
        this.showDiagramDialog.visible = false
      })
    },
    showDiagram(row) {
      getProcessDetailById(row.processDetailId).then(response => {
        this.$nextTick(() => {
          this.processXml = response.data.processXml || ''
          this.processInfo.processXml = this.processXml
          this.diagramXml = this.processXml || ''
          this.showDiagramDialog.visible = true
        })
      })
    },
    getProcessDetailById(processDetailId) {
      this.processXml = ''
      getProcessDetailById(processDetailId).then(response => {
        this.$nextTick(() => {
          this.processXml = response.data.processXml || ''
          this.processInfo.processXml = this.processXml
        })
      })
    }
  }
}
</script>

<style  rel="stylesheet/scss" lang="scss">

.line{
  text-align: center;
}
.el-drawer:focus {
    outline: none;
}
.custom_drawer__content{
    margin: 5px 20px;
    align-content: center;
}
.el-drawer__header{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #72767b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 32px;
    padding: 20px 20px 0;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
}
.drawer {
  overflow: scroll;
}
.page-footer{
  width: 100%;
    height: 50px;
}
</style>

